<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      li {
        margin-top: 20px;
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>三个男人闯天下的故事</li>
      <li>105个男人和3个女人之间的故事</li>
      <li>1个男人和一群女人之间的故事</li>
      <li>一个和尚和四只动物取西经的故事</li>
    </ul>
    <button id="btn">新增加的元素</button>
    <script>
      var ul = document.querySelector("ul");
      var lis = document.querySelectorAll("li");
      var btn = document.querySelector("#btn");

      btn.addEventListener("click", function () {
        // 创建标签
        var liNode = document.createElement("li");
        liNode.innerHTML = "新添加的li";
        ul.appendChild(liNode);
      });

      ul.addEventListener("click", function (e) {
        // 想获取到事件发生那个对象 e.target
        // console.log(e.target);
        // 判断点击的是谁
        if (e.target.nodeName.toLowerCase() === "li") e.target.remove();
      });
    </script>
  </body>
</html>
